<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>停车场用户查询</title>
    <base href="<%=basePath%>/">
    
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1";/><!-- IE的渲染模式 -->
    <meta name="keywords" content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="description" content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="author" content="blackshadowwalker" />
    
    <link href="css/common.css" rel="stylesheet" />
	<link href="bootstrap/3/css/bootstrap.css" rel="stylesheet"/>

	<script src="scripts/jquery/jquery-1.7.min.js"></script>
	<script src="bootstrap/3/js/bootstrap.min.js"></script>
	<link href="bootstrap/3/css/datepicker.css" rel="stylesheet"/>
	<script src="bootstrap/3/js/bootstrap-datepicker.js"></script>
	
	<script src="index/js/index.js" type="text/javascript"></script>
	<script src="scripts/jquery/tableSorter/scripts/JQueryPlugin/TableSort.js" type="text/javascript"></script>
	
	<script type="text/javascript">
		var msg = "${msg}";
		if(msg!="")
			alert(msg);
	
		function del(id){
			if(confirm("确定删除吗？"))
				location.href="<%= basePath%>/${action}?method=delete&id="+id;
		}
		function dele(id){
			if(confirm("确定要锁定吗？"))
				location.href="<%= basePath%>/${action}?method=locking&id="+id;
		}
		function delet(id){
			if(confirm("确定要解锁吗？"))							
				location.href="<%= basePath%>/${action}?method=delocking&id="+id;
		}
		function view(id){
			location.href="<%= basePath%>/${action}?method=view&id="+id;
		}
    	
    	$(document).ready(function(){
			
			$("ul.nav-tabs li").click(function(){
				var tab = $(this);
				var nav = tab.parent();
				$(nav).children("li").each(function()
				{
					var obj = $(this);
					obj.removeClass("active");
				});
				tab.addClass("active");
			});
			
			$("#mainForm").sorttable({
		            ascImgUrl: "scripts/jquery/tableSorter/images/bullet_arrow_up.png",
		            descImgUrl: "scripts/jquery/tableSorter/images/bullet_arrow_down.png",
		            ascImgSize: "8px",
		            descImgSize: "8px",
		            onSorted: function (cell) {
// 		               alert(cell.index() + " -- " + $.trim(cell.text()));
		            }
			});
			
    	});
    	
	</script>
	<script>
		function ResetForm() {
			$("input[name='manager.phone']").val("");
			$("input[name='manager.realName']").val("");
			$("select[name='manager.status']").val("");
		}
	</script>
	
	<style>
		body{
			margin-left: 10px;
			margin-top: 7px;
			witdth:98%;
			margin-right:20px;
			font-size:9px;
			min-width:550px; 
		}
		.input-group-addon{
			width:58px;
		}
		.form-group .form-control{
			width:150px;
		}
		
	</style>
	
  </head>
  
<body>

	<div>
		<ul class="nav nav-tabs" name="nav-tabs" role="tablist">
			<li class="active" name="list"><a href="javascript:show('list');">列表</a></li>
			<li name="picture"> <a href="javascript:show('imagelist');">图表</a></li>
		</ul>
	</div>
	
	<div class="content" type="list">
		<form id="mainForm" class="form-inline" role="form" action="${action}" method="post">
			<!-- 条件查询 -->
			<div class="form-group">
				<div class="input-group">
					<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span>姓名</div>
					<input class="form-control" type="text" placeholder="管理员姓名"  name="manager.realName" />
				</div>
			</div>
			<div class="form-group">
				<div class="input-group">
						<div class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span>手机号</div>
						<input class="form-control" type="text" placeholder="手机号"  name="manager.phone" />
				</div>
			</div>
			<div class="form-group">
				<div class="input-group">
					<div class="input-group-addon"><span class="glyphicon glyphicon-th"></span>状态</div>
					<select class="form-control"  name="manager.status">
						<option value="">--用户状态--</option>
						<option value="0">锁定</option>
						<option value="1">正常</option>
					</select>
				</div>
				</div>
			<div class="form-group">
				<div class="input-group">
				<input class="btn" type="submit" value="查询" />
				&nbsp; 
				<input type="button" value="重置" class="btn" onclick="ResetForm()"/>
				&nbsp; 
				<a href="${action}?method=add " style="color:#fff;"class="btn btn-success ">
				<span class="glyphicon glyphicon-user"></span>添加用户 </a>
				<div style="display:inline;margin-left:30px;color:#f00;">${msg}</div>
			</div>
			</div>
		</form>
	
		<table class="table  table-hover" style="width:100%;">

			<tr>
				<th class="hidden">id</th>
				<th>头像</th>
				<th>帐号</th>
				<th>用户名</th>
				<th>账户余额</th>
				<th>手机号</th>
				<th style="min-width:30px;">状态</th>
				<th style="min-width:200px;">操作</th>
			</tr>

			<s:iterator id="l" value="list" status="index">
				<tr ondblclick="view('${userId}')" >
					<td class="hidden"><s:property value="#l.userId" />
					</td>
					<td><img class="userphoto img-circle" style="width:25px;height:25px;cursor:pointer;"
						src="<s:property value="#l.photo" />"  default="images/user/default.gif"  />
					</td>
					<td><s:property value="#l.userName" /></td>
					<td><s:property value="#l.realName" /></td>
					<td><s:property value="#l.accountBalance" /></td>
					<td><s:property value="#l.phone" /></td>
					<td><s:property value="#l.statusName" /></td>
					<td><s:if test="#l.status!=-1">
						
						<s:if test="#request.locking>=0 && status==1">
							<a class="btn btn-primary" href="javascript:dele(${userId})"
								title="锁定"> <span class="glyphicon glyphicon-lock"></span>
							</a>
						</s:if><s:if test="#request.delocking>=0 && status==0">
							<a class="btn btn-success" href="javascript:delet(${userId})"
								title="解锁"> <span class="glyphicon glyphicon-share"></span>
							</a>
						</s:if>
						<s:if test="#request.delete>0">
							<a class="btn btn-danger" href="javascript:del(${userId})"
								title="删除"> <span class="glyphicon glyphicon-trash"></span>
							</a>
						</s:if>
						 
						<s:if test="#request.update>0">
							<a class="btn btn-info"
								href="${action}?method=update&id=${userId}" title="修改"> <span
								class="glyphicon glyphicon-edit"></span> </a>
						</s:if>
						</s:if> <s:if test="#request.view>0">
							<a class="btn btn-info" href="${action}?method=view&id=${userId}"
								title="查看详情"> <span class="glyphicon glyphicon-list-alt"></span>
							</a>
						
						</s:if> 
						</td>
				</tr>

			</s:iterator>
		</table>
		
		<!-- 分页 -->
		<div name="pannal-pagecontrol">
			<div name="tablebooter" style="font-size: 13px font-family : '宋体'" align="center">
				
					共&nbsp; ${page.totalRow } &nbsp;条记录,
					共&nbsp; ${page.totalPage } &nbsp;页,
					
					&nbsp;&nbsp;
					<a class="submit"  href="${action}?page.currentPage=1&page.pageSize=${page.pageSize}" style="text-decoration:none;">
						<img src="images/page/PaginStart.gif"	border="0" />
					</a>
					&nbsp;&nbsp;
					<s:if test="page.hasPrePage==true">
						<a class="submit" href="${action}?page.currentPage=${page.prePage}&page.pageSize=${page.pageSize}" style="text-decoration:none;" 	>
							<img src="images/page/PaginLeft.gif" border="0" />
						</a>
					</s:if>
					<s:else>
						<img src="images/page/PaginLeftInactive.gif" border="0" title="已是第一页"/>
					</s:else>
					&nbsp;&nbsp;
					第:
					<select name="page.currentPage" onchange="changePage()" >
						 <script>
						 	var totalpage = "${page.totalPage}";
						 	var currentPage = "${page.currentPage}";
							for(var i=1; i<=totalpage; i++)
							{
								if(i==currentPage)
									document.write("<option value='"+i+"' selected >"+i+"</option>");
								else
									document.write("<option value='"+i+"' >"+i+"</option>");
							}
						 </script>
					</select>
					页
					&nbsp;&nbsp;
					<s:if test="page.hasNextPage==true">
						<a class="submit" href="${action}?page.currentPage=${page.nextPage}&page.pageSize=${page.pageSize}"  style="text-decoration:none;">
							<img src="images/page/PaginRight.gif" border="0" />
						</a>
					</s:if>
					<s:else>
						<img src="images/page/PaginRightInactive.gif" border="0" title="已到达最后一页" />
					</s:else>
					&nbsp;&nbsp;
					<a class="submit" href="${action}?page.currentPage=${page.totalPage}&page.pageSize=${page.pageSize}"  style="text-decoration:none;">
						<img src="images/page/PaginEnd.gif" border="0" />
					</a> 
					
					每页显示
					<select name="page.pageSize" onchange="ResetSelect();changePage();" >
						<option value="5" >5</option>	
						<option value="10" >10</option>				
						<option value="15" >15</option>				
						<option value="20" >20</option>				
						<option value="50" >50</option>				
						<option value="100" >100</option>				
						<option value="200" >200</option>				
						<option value="500" >500</option>				
					</select>
					<script>
						$("select[name='page.pageSize']").val("${page.pageSize}");
					</script>
					条记录&nbsp;
	
			</div>
	
			<script>
				function ResetSelect(){
					$("select[name='page.currentPage']").val('1');
				}
				function changePage(){
					var curPage = $("select[name='page.currentPage']").val();
					var pageSize = $("select[name='page.pageSize']").val();
					var url = "${action}?page.currentPage="+curPage+"&page.pageSize="+pageSize;
					$("#mainForm").attr("action", url);
					$("#mainForm").submit();
					
				}
			
				$(document).ready(function(){
					$("a[class='submit']").click(function (event)
					{
					    event.preventDefault();
					});
					
					$("a[class='submit']").bind("click", function(){
						var url = $(this).attr("href");
						$("#mainForm").attr("action", url);
						$("#mainForm").submit();
					});
				});
	
			</script>
		</div>	<!-- end of 分页 -->
	</div><!-- end of list -->
	
	
	<!-- 头像列表 -->
	<div class="content" type="imagelist" style="display:none;">
		<div class="container-fluid">
			<s:iterator id="l" value="list" status="index">
				<span class="col-xs-1 user-item" style="width:140px;height:170px;" >
					<a href="${action}?method=view&id=${userId}">
						<img class="userphoto img-thumbnail" src="${photo}" default="images/user/default.gif" style="width:120px;height:120px;cursor:pointer;" />
					</a> <br/>
					<span class="nowrap-ellipsis" title="${userName}" style="display:inline-block;width:120px;" >帐号: ${userName} </span> <br/>
					<span class="nowrap-ellipsis" title="${realName}" style="display:inline-block;width:120px;" >姓名: ${realName}</span> <br/>
					<br/>
				</span>
			</s:iterator>
		</div>
	</div><!-- end of 头像列表 -->
	
	
	<script>
	
		//切换显示方式
			function show(showstyle){
	    		$("div.content").hide();
				$("div.content[type='"+showstyle+"']").show();
	    	}
	
	    	
	</script>
	
</body>
</html>
